<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
      <div class="top">
        <div class="title">系统基本信息</div>
        <el-button type="primary" icon="folder-checked" @click="saveObj">保存</el-button>
        
      </div>
				<el-form :inline="true" :model="sysData"  ref="queryRef" class="mt30">
          <el-row class="ml10">
            <el-col :span="8" class="mb20">
              <el-form-item label="全称系统名称:" prop="fullSystemName">
                <el-input placeholder="请输入系统名称" v-model="sysData.fullSystemName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="mb20">
              <el-form-item label="精简系统名称:" prop="reducedSystemName">
                <el-input placeholder="请输入系统名称" v-model="sysData.reducedSystemName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="mb20">
              <el-form-item label="显隐:">
                <el-checkbox v-model="sysData.fullNameReveal" label="全称系统名称" />
                <el-checkbox v-model="sysData.reducedNameReveal" label="精简系统名称" />
              </el-form-item>
            </el-col>
          </el-row>
					<el-row class="ml10">
            <el-col :span="8" class="mb20">
              <el-form-item label="版权信息描述:" prop="copyrightInfo">
                <el-input placeholder="请输入版权描述" v-model="sysData.copyrightInfo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="mb20">
              <el-form-item label="系统描述:" prop="remark">
                <el-input placeholder="请输入描述" v-model="sysData.remark"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="mb20">
              <el-form-item label="显隐:" >
                <el-checkbox v-model="sysData.remarkReveal" label="系统描述" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="ml10">
            <el-col :span="8" class="mb20">
              <el-form-item label="系统logo:" prop="img">
                <ImageUpload v-model:imageUrl="sysData.img" borderRadius="50%">
									<template #empty>
										<span>请上传logo</span>
									</template>
								</ImageUpload>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="mb20">
              <el-form-item label="登录页背景:" prop="backgroudImg">
                <ImageUpload v-model:imageUrl="sysData.backgroudImg" borderRadius="50%">
									<template #empty>
										<span>请上传登录页背景</span>
									</template>
								</ImageUpload>
              </el-form-item>
            </el-col>
            
          </el-row>
				</el-form>
		</div>

	
	</div>
</template>

<script lang="ts" name="systemSetting" setup>




import {validateNull} from '/@/utils/validate';
import { systemInfo, systemInfoSave } from '/@/api/admin/systemSetting';
import { useMessage } from '/@/hooks/message';


import {useThemeConfig} from '/@/stores/themeConfig';
import {Local} from '/@/utils/storage';



const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);

const ImageUpload = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'));

// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});


onMounted(() => {
  getSystemSettingInfo()
})

let sysId:any = ref()

let sysData = ref({
  id: '',
  copyrightInfo:'',
  fullSystemName: '',
  reducedSystemName: '',
  fullNameReveal: false,
  reducedNameReveal: false,
  remarkReveal: false,
  backgroudImg: '',
  remark: '',
  img: ''
})

const getSystemSettingInfo = () => {
  systemInfo().then((res) => {
    if(!validateNull(res.data)){
      sysData.value = res.data
    }
    
  })
}

const saveObj = () => {
  systemInfoSave(sysData.value).then(res => {
    if(res.data) {
      useMessage().success('保存成功');
      getSystemSettingInfo()
      setGlobalSysInfo()
    } else {
      useMessage().success('保存失败');
    }
  })
}

const setGlobalSysInfo = () => {
  getThemeConfig.value.globalTitle = sysData.value.fullSystemName;
  getThemeConfig.value.globalSimpleTitle = sysData.value.reducedSystemName;

  getThemeConfig.value.isGlobalSimpleTitleView = sysData.value.reducedNameReveal;
  getThemeConfig.value.isGlobalTitleView = sysData.value.fullNameReveal;

  getThemeConfig.value.footerAuthor = sysData.value.copyrightInfo;
  getThemeConfig.value.logoImgUrl = sysData.value.img;

  getThemeConfig.value.backgroudImg = sysData.value.backgroudImg
	setLocalThemeConfig();
}


// 存储布局配置
const setLocalThemeConfig = () => {
	Local.remove('themeConfig');
	Local.set('themeConfig', getThemeConfig.value);
};

</script>
<style lang="scss" scoped>
.top{
  display: flex;
  justify-content: space-between;
  .title {
    font-size: 18px;
    padding-left: 30px;
    margin-top: 30px;
    font-weight: 600;
  }
}
:deep(.el-form-item__label) {
  width: 150px;
}
:deep(.el-form-item__content) {
  width: 250px;
}
</style>
